/**
 * map, layerType, layerTitle,data
 * 点为二维数组，经纬度[[2,2],[3,3]]
 * 线和面为三维数组[[[2,2],[3,3]]]
 */
export class AddGraphics {
  constructor(map, esriNameSpace) {
    this._map = map
    this._EsriNameSpace = esriNameSpace
  }

  addGraphics(layerType, layerTitle, data, symbol) {
    return new Promise(async (resolve, reject) => {
      const graphics = []
      const _graphicsLayer = this.createGraphicsLayer(layerTitle)
      this.mapAddLayer(this._map, _graphicsLayer)
      if (layerType == 'point') {
        data.forEach((point) => {
          try {
            const pointGraphic = this.addPoint(point[0], point[1], symbol)
            // const textName = this.addPointText(point[0], point[1], point[2])
            graphics.push(pointGraphic)
          } catch (error) {
            console.log('点位数据错误')
          }
        })
      } else if (layerType == 'polyline') {
        data.forEach((line) => {
          try {
            const polylineGraphic = this.addPolyline(line, symbol)
            graphics.push(polylineGraphic)
          } catch (error) {
            console.log('线位数据错误')
          }
        })
      } else if (layerType == 'polygon') {
        data.forEach((polygon) => {
          try {
            const polygonGraphic = this.addPolygon(polygon, symbol)
            graphics.push(polygonGraphic)
          } catch (error) {
            console.log('面位数据错误')
          }
        })
      } else {
        console.log('类型错误')
      }
      this.layerAddGraphic(_graphicsLayer, graphics)
      resolve(0)
    })
  }

  addTextGraphics(layerType, layerTitle, data) {
    return new Promise(async (resolve, reject) => {
      const graphics = []
      const _graphicsLayer = this.createGraphicsLayer(layerTitle)
      this.mapAddLayer(this._map, _graphicsLayer)
      if (layerType == 'point') {
        data.forEach((point) => {
          try {
            const textName = this.addPointText(point[0], point[1], point[2])
            graphics.push(textName)
          } catch (error) {
            console.log('点位文本数据错误')
          }
        })
      }
      this.layerAddGraphic(_graphicsLayer, graphics)
      resolve(0)
    })
  }

  /**
   * 新增一个graphics的图层组
   */
  createGraphicsLayer(title) {
    const layer = new this._EsriNameSpace.GraphicsLayer({
      graphics: [],
      opacity: 1,
      title: title,
      id: title,
      visible: true,
    })
    return layer
  } // end createGraphicsLayer

  // 在地图map中添加图层
  mapAddLayer(map, layer) {
    map.add(layer)
  } // end mapAddLayer

  /**
   * 添加点数据Graphic
   * lng经度 lat纬度
   */
  addPoint(lng, lat, symbol) {
    const point = {
      type: 'point',
      hasM: true,
      longitude: lng,
      latitude: lat,
    }
    const pointGraphic = new this._EsriNameSpace.Graphic({
      geometry: point,
      symbol,
    })
    return pointGraphic
  } // end addPoint

  /**
   * 添加点文本数据Graphic
   * lng经度 lat纬度
   */
  addPointText(lng, lat, textName) {
    const textSymbol = {
      type: 'text', // autocasts as new TextSymbol()
      color: 'white',
      haloColor: 'black',
      haloSize: '1px',
      text: textName || '',
      xoffset: 3,
      yoffset: 3,
      font: {
        // autocasts as new Font()
        size: 12,
        family: 'Josefin Slab',
        weight: 'bold',
      },
    }
    const point = {
      type: 'point',
      hasM: true,
      longitude: lng,
      latitude: lat,
    }
    const pointGraphic = new this._EsriNameSpace.Graphic({
      geometry: point,
      symbol: textSymbol,
    })
    return pointGraphic
  } // end addPoint

  /**
   * 添加线数据Graphic
   *paths：二维数组，经纬度[[2,2],[3,3]]
   */
  addPolyline(linePaths, symbol) {
    const polyline = {
      type: 'polyline',
      paths: linePaths,
    }

    // const lineSymbol = {
    //   type: 'simple-line',
    //   color: [226, 119, 40],
    //   width: 4,
    // }

    const polylineGraphic = new this._EsriNameSpace.Graphic({
      geometry: polyline,
      symbol,
      // attributes: lineAtt,
    })
    return polylineGraphic
  } // end addPolyline

  /**
   * 添加面数据Graphic
   *rings：二维数组，经纬度[[2,2],[3,3],[2,2]]，首尾数据一致
   */
  addPolygon(polygonRings, symbol) {
    const polygon = {
      type: 'polygon',
      rings: polygonRings,
    }
    var lineAtt = {
      Name: 'Keystone Pipeline',
      Owner: 'TransCanada',
      Length: '3,456 km',
    }

    const polygonGraphic = new this._EsriNameSpace.Graphic({
      geometry: polygon,
      symbol: symbol,
      attributes: lineAtt,
      popupTemplate: {
        title: 'fffff',
        outFields: ['*'],
        content: [
          {
            // Pass in the fields to display
            type: 'fields',
            fieldInfos: [
              {
                fieldName: 'NAME',
                label: 'Name',
              },
              {
                fieldName: 'Length',
                label: 'Length',
              },
            ],
          },
        ],
      },
    })
    return polygonGraphic
  } // end addPolygon

  // GraphicsLayer图层加载graphic
  layerAddGraphic(layer, graphics) {
    if (Array.isArray(graphics)) {
      layer.addMany(graphics)
    } else {
      layer.add(graphics)
    }
  } // end layerAddGraphic
}
